<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:r="http://ricchieri.com/facelets"
	xmlns:p="http://primefaces.org/ui">
<h:head>
</h:head>
<h:body>


	<ui:composition template="../../templates/commonLayoutOther.xhtml">
		<ui:define name="title">#{msg.titleOther}</ui:define>
		<ui:define name="content">
					
			<h:form id="addSchedule" style="height:50%">			
				<h2>#{msg.addSchedule}</h2>						
				<p:tabView id="tabView" style="margin-top:15px" > 
					<p:ajax event="tabChange" update="tab2"/>  
					<p:tab id="tab1" title="#{msg.scheduleCalendar}">
						<h:outputLabel value="#{msg.eventStatus}" style="text-align:center; width:20%; font-weight: bold"/>
						<p:panelGrid columns="2" style="margin-bottom:10px;text-align: center;width:30%;">
							<p:outputPanel>
								<span class="completeTravelDetails">Empty</span>
								<h:outputLabel value="#{msg.saved}"/>
							</p:outputPanel>
							
							<p:outputPanel>
								<span class="notCompleteTravelDetails">Empty</span>
								<h:outputLabel value="#{msg.notSaved}"/>
							</p:outputPanel>
						</p:panelGrid>


						<h:panelGrid columns="2">
							<h:outputLabel value="#{msg.tripOrientation}" />
							<p:selectOneMenu value="#{addScheduleMB.scheduleCharterFilter.trip}">
								<f:selectItems value="#{addScheduleMB.trips}" />
								<p:ajax listener="#{addScheduleMB.changeTrip}" update=":addSchedule"/>
							</p:selectOneMenu>
						</h:panelGrid>
						<p:schedule id="schedule" value="#{addScheduleMB.scheduleLazyModel}" draggable="false" resizable="false" widgetVar="myschedule" style="padding-top:15px;" timeFormat="HH:mm">  
							<p:ajax event="dateSelect" listener="#{addScheduleMB.onDateSelect}" update="eventDetails" oncomplete="eventDialog.show()" />  
		       				<p:ajax event="eventSelect" listener="#{addScheduleMB.onEventSelect}" update="eventDetails" oncomplete="eventDialog.show()" /> 
						</p:schedule>				
						
						 <p:dialog widgetVar="eventDialog" header="#{msg.eventDetails}" showEffect="clip" hideEffect="clip" maximizable="false" minimizable="false" resizable="false">
							<p:messages showDetail="false" autoUpdate="true" closable="false"/>  
					        <h:panelGrid id="eventDetails" columns="3">
					            <h:outputLabel for="from" value="#{msg.from}" />
					            <p:calendar id="from" pattern="dd/MM/yyyy" value="#{addScheduleMB.event.startDate}" showOn="button" readOnlyInputText="true" required="true" requiredMessage="#{msg.requiredStartDate}" disabled="#{addScheduleMB.isEventExpired()}">
									<f:convertDateTime pattern="dd/MM/yyyy" timeZone="GMT-3"/>
									<p:ajax event="dateSelect" listener="#{addScheduleMB.changeFrecuency}" update="to"/>
								</p:calendar>
								<p:message id="fromMsg" for="from" display="icon"/>
					
					            <h:outputLabel for="to" value="#{msg.to}" />
					            <p:calendar id="to" pattern="dd/MM/yyyy" value="#{addScheduleMB.event.endDate}" showOn="button" readOnlyInputText="true" required="true" requiredMessage="#{msg.requiredFinishDate}" disabled="#{addScheduleMB.isEditableEndDate}">
									<f:convertDateTime pattern="dd/MM/yyyy" timeZone="GMT-3"/>
								</p:calendar>
								<p:message id="toMsg" for="to" display="icon"/>
					            
					            <h:outputLabel value="#{msg.eventTime}" />
					            <p:calendar id="time" value="#{addScheduleMB.event.time}" pattern="HH:mm" timeOnly="true" readOnlyInputText="true" required="true" requiredMessage="#{msg.requiredTime}" disabled="#{addScheduleMB.isEventExpired()}"/>
								<p:message id="timeMsg" for="time" display="icon"/>
					
								<h:outputLabel value="#{msg.scheduleCharter}" />
								<p:selectOneMenu value="#{addScheduleMB.event.selectedCharter}" id="charter" disabled="#{addScheduleMB.isEventExpired()}">
									<f:selectItem itemLabel="" itemValue="" />
									<f:selectItems value="#{addScheduleMB.charters}" />
								</p:selectOneMenu>
								<p:message id="charterMsg" for="charter" display="icon"/>
					
								<h:outputLabel value="#{msg.scheduleDriver}" />
								<p:selectOneMenu value="#{addScheduleMB.event.selectedUser}" id="driver" disabled="#{addScheduleMB.isEventExpired()}">
									<f:selectItem itemLabel="" itemValue="" />
									<f:selectItems value="#{addScheduleMB.users}" />
								</p:selectOneMenu>
								<p:message id="driverMsg" for="driver" display="icon"/>
					
					            <h:outputLabel value="#{msg.eventFrecuency}" rendered="#{addScheduleMB.event.id == null}"/>
						        <p:outputPanel id="customPanel" rendered="#{addScheduleMB.event.id == null}">
								    <p:selectOneRadio value="#{addScheduleMB.selectedFrecuency}" id="customRadio" layout="custom" disabled="#{addScheduleMB.isEventExpired()}">  
								    	<f:selectItem itemLabel="#{msg.eventNoneFrecuency}" itemValue="1" /> 
							            <f:selectItem itemLabel="#{msg.eventAllDays}" itemValue="2" />  
							            <f:selectItem itemLabel="#{msg.sameDaySelected}" itemValue="3" />  
							            <p:ajax listener="#{addScheduleMB.changeFrecuency}" update="to"/>
							        </p:selectOneRadio>
								
								    <h:panelGrid columns="2">
								    	<p:radioButton for="customRadio" itemIndex="0"/>
								        <h:outputLabel value="#{msg.eventNoneFrecuency}" />
								        
								        <p:radioButton for="customRadio" itemIndex="1"/>
								        <h:outputLabel value="#{msg.eventAllDays}" />
								
								        <p:radioButton for="customRadio" itemIndex="2"/>
								        <h:outputLabel value="#{msg.sameDaySelected}" />
			
								    </h:panelGrid>
								</p:outputPanel>
								<p:message id="customPanelMsg" for="customPanel" display="icon"/>
								
						        <p:commandButton value="#{msg.delete}" rendered="#{addScheduleMB.event.id != null}" actionListener="#{addScheduleMB.deleteEvent}" oncomplete="myschedule.update();eventDialog.hide();" disabled="#{addScheduleMB.isEventExpired()}"/>
						        <p:commandButton value="#{msg.resetButton}" rendered="#{addScheduleMB.event.id == null}" actionListener="#{addScheduleMB.reset}" update="eventDetails" process="@this" disabled="#{addScheduleMB.isEventExpired()}"/>
						        <p:commandButton value="#{msg.saveButton}" actionListener="#{addScheduleMB.addEvent}" oncomplete="handleRequest(xhr, status, args)" update="eventDetails" disabled="#{addScheduleMB.isEventExpired()}"/>						
					        </h:panelGrid>
		
					    </p:dialog>
					    
					</p:tab>
					<p:tab id="tab2" title="#{msg.scheduleTemplate}">
						<p:dataTable var="scheduleCharter" value="#{addScheduleMB.scheduleLazyModel.events}"
			     	 		style="padding-top:15px" rows="15" paginator="true" 
			     	 		paginatorPosition="bottom" emptyMessage="#{msg.noRecordsFound}">
		
			 		 		<p:column headerText="#{msg.date}" style="width:15%" sortBy="#{scheduleCharter.startDate}">  
				            	<h:outputText value="#{addScheduleMB.formatDate(scheduleCharter.startDate)}" />   
			        		</p:column> 
			        		
			        		<p:column headerText="#{msg.time}" style="width:15%" sortBy="#{scheduleCharter.time}">  
				            	<h:outputText value="#{scheduleCharter.time}" />   
			        		</p:column>
			        		
			        		<p:column headerText="#{msg.charterNumber}" style="width:15%" sortBy="#{scheduleCharter.scheduleCharter.charter.charterNumber}">  
				            	<h:outputText value="#{scheduleCharter.scheduleCharter.charter.charterNumber}" />   
			        		</p:column>  
			        		
			        		<p:column headerText="#{msg.charterType}" style="width:15%" sortBy="#{addScheduleMB.obtainDescription(scheduleCharter.scheduleCharter.charter.charterType.description)}">  
				            	<h:outputText value="#{addScheduleMB.obtainDescription(scheduleCharter.scheduleCharter.charter.charterType.description)}" />   
			        		</p:column>  
			        		
			        		<p:column headerText="#{msg.charterPlaces}" style="width:15%" sortBy="#{scheduleCharter.scheduleCharter.charter.places}">  
				            	<h:outputText value="#{scheduleCharter.scheduleCharter.charter.places}" />   
			        		</p:column> 
			        		
			        		<p:column headerText="#{msg.scheduleDriver}" style="width:15%" sortBy="#{scheduleCharter.scheduleCharter.user.getFullName()}">  
				            	<h:outputText value="#{scheduleCharter.scheduleCharter.user.getFullName()}" />   
			        		</p:column> 
			        		
			        		
			        		
			        	</p:dataTable>
					</p:tab>
				</p:tabView>	
				
				<script type="text/javascript">
					function handleRequest(xhr, status, args) {
				        if(args.validationFailed || !args.isValid) {
							return;
				        } else {
				        	eventDialog.hide();
				        	myschedule.update();
				        }
				    }
				</script>		
			</h:form>
			<h:form>
				<h:panelGrid columns="2" style="margin-top:15px; text-align:center">
					<p:commandButton value="#{msg.resetButton}"
						ajax="false" styleClass="button-action" action="#{addScheduleMB.resetSchedule}"/>
					<p:commandButton value="#{msg.saveButton}"
						action="#{addScheduleMB.save}" ajax="false" styleClass="button-action" />
				</h:panelGrid>
			</h:form>
		</ui:define>
	</ui:composition>
</h:body>
</html>
